  <template>
  <div class="homePage">
    <Vheader :header="header"></Vheader>
    <img class="homeImg" src="static/imgs/homePageImg/home_illustrations.png"/>
    <ul class="activityUl">
      <template v-for="item in templateList">
         <li class="activity" :key="item.name">
           <div class="activityImg"><img :src="item.backgroundImgPath" /></div>
           <div class="create" @click="createActivity(item.id)">
             <img src="static/imgs/homePageImg/home_create.png"/>
             <span>快速创建活动</span>
           </div>
         </li>
      </template>
    </ul>
    <Vfooter></Vfooter>
  </div>
</template>

<script>
import Vheader from './common/Vheader'
import Vfooter from './common/Vfooter'
import { getHomeTemplateAction, getUserTemplateStatusAction } from '../axios/api/homePage_api'
import { getTemplateListAction } from '../axios/api/myActivity_api'
export default {
  name: 'homePage',
  data () {
    return {
      header: {
        templateAction: this.templateAction,
        template: '我的模板'
      },
      templateList: [
        {backgroundImgPath: '',
          description: '',
          id: '',
          name: '',
          serveUrl: '',
          state: '',
          title: '',
          type: '',
          username: ''}
      ],
      templateId: '',
      code: ''
    }
  },
  // watch: {
  //   haveActivity (newVal, oldVal) {
  //     return this.getTemplateList()
  //   }
  // },
  components: {
    Vheader,
    Vfooter
  },
  created () {
    this.getHomeTemplate()
  },
  updated () {
    window.scroll(0, 0)
  },
  methods: {
    // 获取模板参数
    async getTemplateList () {
      let {data} = await getTemplateListAction()
      if (data.code === 1) {
        this.haveActivity = '我的模板'
      } else {
        this.haveActivity = ''
      }
    },
    // 获取所有用户（未登录）模板列表
    async  getHomeTemplate () {
      let {data} = await getHomeTemplateAction()
      this.templateList = data.templateList
      if (this.templateList === undefined) {
        this.$message({
          message: '目前没有创建模板！',
          type: 'warning'
        })
      } else {
        for (let i = 0; i < this.templateList.length; i++) {
          this.templateList[i].backgroundImgPath = '/littlefinger/storage/images/' + this.templateList[i].backgroundImgPath
        }
      }
    },
    // 购买模板前，判断是否需要购买
    async getUserTemplateStatus (id) {
      let {data} = await getUserTemplateStatusAction({templateId: this.templateId})
      this.code = data.code
      if (this.code === 1) {
        this.$router.push({name: 'myTemplate', query: {templateId: this.templateId}})
      } else if (this.code === 2) {
        this.$message({
          message: '模板不存在！',
          type: 'warning'
        })
      } else if (this.code === 3) {
        this.$router.push({name: 'myActivity'})
      } else {
        this.$message({
          message: '该模板需要续费！',
          type: 'warning'
        })
        this.$router.push({name: 'myActivity'})
      }
    },
    // 点击创建活动函数
    async createActivity (id) {
      if (!this.$store.state.user) {
        this.$message({
          message: '您未登录，请先登录',
          type: 'warning'
        })
      } else {
        this.templateId = id
        this.getUserTemplateStatus(this.templateId)
      }
    },
    // 跳转到我的活动模板
    templateAction (id) {
      this.$router.push({name: 'myActivity'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.homePage{
  font-size: 20px;
  min-width: 600px;
  overflow: hidden;
  background-color: #e9e9e7;
  font-family: 'SimSun';
}
.homePage .activityUl{
  margin: 0 78px;

}
.homeImg{
  width: 100%;
  /*margin-top: -54px;*/
  margin-bottom: -4px;
}
.activity{
  width: 100%;
  flex-direction: row;
  flex-wrap:nowrap;
  box-shadow: 4px 4px 13px #666;
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  height: 381px;
  padding: 10px;
  background-color: #fff;
}
.activityImg {
  flex: 1;

}
.activityImg img{
  width: 100%;
  height: 381px;
}
/*创建活动样式*/
.create{
  display: flex;
  flex-direction: column;
  width: 161px;
  background-color: #F4D515;
  justify-content: center;
  align-items:center;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
.create img{
  width: 54px;
  margin-top: -40px;
}
.create span{
  display: inline-block;
  margin-top: 10px;
}
</style>
